<template>
<!-- 首页的视频页面 -->
    <div class="video">
        <Loading v-if="!lists"/>
        <!-- <div v-else> -->
        <van-pull-refresh v-else v-model="refreshing" @refresh="onRefresh">
            <!-- 下拉提示 -->
            <template #pulling>
            <img class="pull" src="../assets/images/pullFresh.png" />
            </template>
            <!-- 释放提示 -->
            <template #loosing>
            <img class="pull" src="../assets/images/pullFresh.png" />
            </template>

            <!-- 加载提示 -->
            <template #loading>
            <img class="pull" src="../assets/images/loading.gif" />
            </template>

            <van-list
                v-model="loading"
                :finished="finished"
                finished-text="没有更多了"
                @load="onLoad"
            >
                <template #loading>
                    <img class="pull" src="../assets/images/loading.gif" />
                </template>
                <ul class="video">
                    <Lists v-for="(list,index) in lists" :key="index" :list="list.r"/>
                </ul>
            </van-list>
      </van-pull-refresh>
    </div>
</template>

<script>
import { getVideoList } from "@/apis/index";
import Loading from  "@/components/Loading.vue"
import Lists from  "@/components/Lists.vue"

export default {
    name:'HomeVideo',
    components:{
        /* ListsTop,
        ListsCenter,
        ListsBottomLeft,
        ListsText, */
        Loading,
        Lists,
    },
    data: function(){
        return{
            lists: null,
            i: 0,
            loading: false,
            finished: false,
            refreshing: false,
        }
    },
    created: async function () {
        this.lists = (await getVideoList(0)).data.result.list;
    },
    methods: {
//下拉加载数据
        onLoad: function(){
        // 异步更新数据
        if (this.refreshing) {
            this.lists = [];
            this.refreshing = false;
            this.i = this.i += 10;
            }
            this.i += 10;
            getVideoList(this.i).then( res => {
            this.lists = [...this.lists, ...res.data.result.list];
            // 加载状态结束
            this.loading = false;
            // 数据全部加载完成
            if (this.i == 100) {
                this.finished = true;
            }
            })
        },
        onRefresh() {
            // 清空列表数据
            this.finished = false;

            // 重新加载数据
            // 将 loading 设置为 true，表示处于加载状态
            this.loading = true;
            setTimeout(() => {
                this.onLoad();
            },1000);
        },
    }
}
</script>

<style lang="less" scoped>
.pull{
  margin: 0 auto;
  width: 100px;
}
</style>